<template>
  <div class="app-container">
    <!-- <router-view></router-view> -->
    <Parent></Parent>
  </div>
</template>

<script>
import Parent from '@/views/test/Parent.vue'
export default {
  components: {
    Parent
  }
}
</script>

<style scoped>
  .app-container {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .app-container nav {
    height: 50px;
  }

  .app-container nav ul {
    border-top: solid 1px #ccc;
  }

  .app-container nav ul li.active {
    background-color: gray;
  }

  .app-container main {
    flex: 1;
  }

  ul {
    height: 50px;
    display: flex;
    border-bottom: solid 1px #ccc;
  }

  ul>li {
    flex: 1;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  ul>li.active {
    background-color: purple;
    color: #fff;
  }
</style>